<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>字典管理</title>
    <%@include file="../../public/commonCss.jsp" %>
    <%@include file="../../public/commonJs.jsp" %>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/fileList.css"/>
</head>
<body ms-controller="main" class="ms-controller">
<div id="wrapper">
    <div class="boxtoolbar whiteBox actionArea contentbox" style="height:65px">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
            <tr>
                <td style="width:260px;">
                    <div class="font999" style="float:left;line-height:30px;font-size:16px">车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;次：</div>
                    <div style="line-height: 30px;">
                        <select onchange="selectChange(this)">
                            <c:forEach var="t" items="${road.trains}">
                                <option value='${t.code}'
                                        <c:if test="${t.code eq train.code}">selected</c:if>>${t.code}</option>
                            </c:forEach>
                        </select>
                    </div>
                </td>
                <td style="width:500px;">
                    <div class="font999" style="float:left;line-height: 30px;font-size:16px">交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;路：</div>
                    <div style="line-height: 30px;"><span>${road.name}</span></div>
                </td>
                <td style="width:260px;">
                    <div class="font999" style="float:left;line-height: 30px;font-size:16px">车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</div>
                    <div style="line-height: 30px;"><span>${loginInfo.trainType}</span></div>
                </td>
                <td style="width:260px;">
                    <div class="font999" style="float:left;line-height: 30px;font-size:16px">车&nbsp;&nbsp;组&nbsp;&nbsp;号：</div>
                    <div style="line-height: 30px;"><span>${loginInfo.trainNum}</span></div>
                </td>
                <td></td>
            </tr>
            <tr>
                <td style="width:260px;">
                    <div class="font999" style="float:left;line-height: 30px;font-size:16px">始&nbsp;&nbsp;发&nbsp;&nbsp;站：</div>
                    <div style="line-height: 30px;"><span>${train.startCity}&nbsp;&nbsp;${train.startTime}</span></div>
                </td>
                <td style="width:340px;">
                    <div class="font999" style="float:left;line-height: 30px;font-size:16px">终&nbsp;&nbsp;点&nbsp;&nbsp;站：</div>
                    <div style="line-height: 30px;"><span>${train.endCity}&nbsp;&nbsp;${train.endTime}</span></div>
                </td>
                <td style="width:260px;">
                    <div class="font999" style="float:left;line-height: 30px;font-size:16px">机&nbsp;&nbsp;械&nbsp;&nbsp;师：</div>
                    <div style="line-height: 30px;"><span>${loginInfo.userName}</span></div>
                </td>
                <td style="width:260px;">
                    <div class="font999" style="float:left;line-height: 30px;font-size:16px">日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期：</div>
                    <div style="line-height: 30px;"><span>${loginInfo.planDate}</span></div>
                </td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="boxmain whiteBox lrbox" style="margin-top:-50px">
        <div class="lrboxleft borderR" style="width:20%">
            <div class="from-header borderB ">
                <span class="font14">工序列表</span>
            </div>
            <div class="from-body withheader contentbox8">
                <ul id="treeDemo" class="ztree" style="width:100%;height: 100%; overflow: auto;"></ul>
            </div>
        </div>
        <div class="lrboxmain borderL" style="margin-left:20%">
            <div class="from-header borderB contentbox">
                <div>
                    <div class="tab_pd tab1">
                        <ul>
                            <li id="pz" class="tab_pdS"><a href="javascript:;" ms-on-click="tabj(1)">拍照预览</a></li>
                            <li id="nfc" class="tab_pdN"><a href="javascript:;" ms-on-click="tabj(0)">NFC预览</a></li>
                        </ul>
                    </div>
                    <div style="font-size:14px;float:right;margin-right:50px" ms-if="isMod=='0'">
                        <span>系统评分:</span><span style="color:red">{{userTrainScore.sysScore==-1?"暂未评分":userTrainScore.sysScore+'分'}}</span>
                        <span style="margin-left:15px">手动评分:
							<input type="number" value="0" ms-duplex="userTrainScore.modScore" class="inputText"
                                   style="width:50px"/>
						</span>
                        <span style="margin-left:15px">评分备注:
							<input type="text" value="0" class="inputText" ms-duplex="userTrainScore.modRemark"
                                   style="width:100px"/>
						</span>
                        <button class="layui-btn layui-btn-normal layui-btn-small" style="margin-left:20px"
                                ms-on-click="saveUserScore()">保存
                        </button>
                    </div>
                    <div style="font-size:14px;float:right;margin-right:20px" ms-if="isMod=='1'">
                        <span>系统评分：</span><span style="color:red">{{userTrainScore.sysScore}}</span>
                        <span style="margin-left:15px">手动评分：
							<span style="color:red">{{userTrainScore.modScore}}</span>
						</span>
                        <span style="margin-left:15px">评分人：
							<span style="color:red">{{userTrainScore.modUser}}</span>
						</span>
                        <span style="margin-left:15px">评分备注：
							<span style="color:red">{{userTrainScore.modRemark}}</span>
						</span>
                    </div>
                </div>

            </div>
            <div class="from-body withheader contentbox" style=" overflow: auto;">
                <div>
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                所属工序:<span style="color:#2f17a8;">{{workName}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            </h3>
                        </div>
                        <div class="panel-body" ms-if='tab==1'>
                            <div class="gallery-wrap">
                                <div class="column clearfix">
                                    <div class="inner" ms-repeat-ml="tableDatas">
                                        <div style="background: rgb(228, 228, 228);">
                                            <div class="img-wrap" ms-on-click="picLayer(ml.filePath,ml.fileType)">
                                                <img style="height:319px"
                                                     ms-attr-src="${fileServerUrl}{{ml.filePath}}" class="mfp-fade"
                                                     ms-if="ml.fileType=='jpg'"/>
                                            </div>
                                            <div class="img-wrap" ms-on-click="playMp3(ml.filePath)">
                                                <img style="height:319px"
                                                     src="${ctx}/static/images/mp3.png" class="mfp-fade"
                                                     ms-if="ml.fileType=='mp3'"/>
                                            </div>
                                            <div style="position:absolute;width:82%;height:20px;z-indent:2;left:13px;top:5px;background: rgba(255, 255, 255, 0.5);"
                                                 ms-if="ml.fileType=='jpg'">
                                                <span style="color: rgb(23, 80, 242);" ms-if="ml.colorRed=='0'">同工序相似率：{{ml.simRate}}%</span>
                                                <span style="color: red;" ms-if="ml.colorRed=='1'">同工序相似率：{{ml.simRate}}%</span>
                                            </div>
                                            <div class="caption-static">
                                                <span style="color:#67a776;float: left;">&nbsp;{{ml.fileDate}}</span>&nbsp;
                                                <span style="float: right;">{{ml.fileTime}}&nbsp;</span>
                                            </div>
                                            <div class="workName caption-static"
                                                 style="text-align: center;padding:3px;"
                                                 ms-attr-title='ml.workName'>
                                                <button class="layui-btn layui-btn-mini layui-btn-danger"
                                                        ms-if="ml.mp3Path!=''"
                                                        ms-on-click="playMp3(ml.mp3Path)">播放
                                                </button>
                                                <button class="layui-btn layui-btn-mini layui-btn-primary">
                                                    {{ml.workName}}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body" ms-if='tab==0'>
                            <table style="width:100%" cellpadding="5" cellspacing="0" border="0" class="tableStyle">
                                <thead align="center">
                                <tr>
                                    <th>行号</th>
                                    <th>工序编号</th>
                                    <th>工序名称</th>
                                    <th>NFC位置</th>
                                    <th>NFC时间</th>
                                </tr>
                                </thead>
                                <tbody align="center">
                                <tr ms-repeat='nfcDatas'>
                                    <td>{{$index+1}}</td>
                                    <td>{{el.workId}}</td>
                                    <td>{{el.workName}}</td>
                                    <td>{{el.nfcPlace}}</td>
                                    <td>{{el.nfcTime}}</td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    var zTreeObj;
    avalon.ready(function () {
        vm = avalon.define({
            $id: "main",
            tableDatas: [],//图片数据
            nfcDatas: [],
            treeDatas: [],//菜单数据
            workName: '巡检检测工序',//选择的工序名称
            tab: '1',
            title: '',
            selectWorkId: '',
            searchKey: {trainCode: '${train.code}', loginId: '${loginInfo.id}'},
            userTrainScore: {
                id: '',
                userNum: '',
                trainCode: '',
                planTime: '',
                sysScore: '',
                modScore: '',
                finalScore: '',
                modUser: '',
                modRemark: ''
            },
            isMod: '',
            isShowScore: "",
        })
        loadTableData();
        avalon.scan();
        loadTreeData();
        loadScoreInfo();
    });

    //当select值改变的时候触发
    function selectChange(_this) {
        var selectValue = $(_this).val();
        vm.searchKey.trainCode = selectValue;
        vm.userTrainScore.trainCode = selectValue;
        loadTreeData();
        loadTableData();
        loadScoreInfo();
    }

    //查询评分信息
    function loadScoreInfo() {
        ajaxUtil.postDealCode("${ctx}/indexController/selectUserScore.action", vm.$model.searchKey, false, function (data) {
            vm.userTrainScore = data.userTrainScore;
            vm.isMod = data.isMod;
            vm.isShowScore = data.isShow;
        })
    }

    //保存手动修改的分数
    function saveUserScore() {
        if (vm.$model.userTrainScore.id == '') {
            layerUtil.fail("系统暂未评分，不可修改");
            return;
        }
        var dataStr = $.param(vm.$model.userTrainScore);
        layerUtil.confirm('你确定提交吗，提交后不可更改！', function () {
            ajaxUtil.post('${ctx}/indexController/updateUserScore.action', dataStr, false, function (data) {
                layerUtil.success("更新成功");
                vm.userTrainScore = data.data;
                vm.isMod = '1';
            })
        });
    }

    //tab切换
    function tabj(value) {
        if (value == '1') {
            vm.tab = 1;
            $("#pz").removeClass("tab_pdN");
            $("#pz").addClass("tab_pdS");
            $("#nfc").removeClass("tab_pdS");
            $("#nfc").addClass("tab_pdN");
        } else {
            vm.tab = 0;
            $("#nfc").removeClass("tab_pdN");
            $("#nfc").addClass("tab_pdS");
            $("#pz").removeClass("tab_pdS");
            $("#pz").addClass("tab_pdN");
        }
    }

    //初始化分页插件的方法
    function loadTableData() {
        var dataStr = vm.$model.searchKey;
        dataStr.workId = vm.$model.selectWorkId;
        ajaxUtil.post("${ctx}/indexController/selectAllWorkFile.action", dataStr, true, function (data) {
            vm.tableDatas = data.datas;
            vm.nfcDatas = data.nfcDatas;
        })
    }

    //加载菜单数据
    function loadTreeData() {
        var dataStr = $.param(vm.$model.searchKey);
        ajaxUtil.post("${ctx}/indexController/selectUserWork.action", dataStr, false, function (data) {
            vm.treeDatas = data.datas;
            initZTree();
        });
    }

    //初始化树
    function initZTree() {
        var setting = {
            data: {
                simpleData: {
                    enable: true, //是否启用简单数据类型
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: 0
                }
            },
            callback: { //回调
                onClick: nodeOnClick
            }
        };
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, vm.$model.treeDatas);
        var nodes = zTreeObj.getNodes();
        zTreeObj.expandNode(nodes[0], true, false, false);
    }

    //播放Mp3
    function playMp3(mp3Path) {
        var dataStr = {
            imagePath: mp3Path
        }
        ajaxUtil.post("${ctx}/emergeFileController/changeMp3.action", dataStr, true, function (data) {
            parent.layer.open({
                type: 2,
                title: '自动播放',
                area: ['700px', '530px'],
                shadeClose: true,
                fixed: false, //不固定
                content: '${ctx}/static/player/index.jsp?url=' + data.url
            });
        })
    }

    //显示图片或者音频
    function picLayer(imagePath, fileType) {
        var fileUrl = '${fileServerUrl}' + imagePath;
        if (fileType == "jpg") {
            parent.layer.open({
                type: 2,
                title: false,
                area: ['60%', '95%'],
                shadeClose: true, //开启遮罩关闭
                content: '${ctx}/toImageShow.action?imagePath=' + fileUrl
            });
        }
    }

    //点击节点的回调
    function nodeOnClick(event, treeId, treeNode) {
        vm.selectWorkId = treeNode.id;
        vm.workName = treeNode.workName;
        loadTableData();
    }
</script>
</body>
</html>